<template>
	<view class="page-search">
		<up-navbar safeAreaInsetTop fixed placeholder title="营销平台" @left-click="pageBack"></up-navbar>

		<view class="search-wrap">
			<view class="search-input">
				<u-search
					v-model="searchKey"
					:clearabled="true"
					height="64rpx"
					:showAction="false"
					searchIconColor="#4E5969"
					searchIconSize="24"
					placeholder-color="#C9CDD4"
					placeholder="搜索地点/景点/酒店等"
					bg-color="#F1F2F5"
					:inputStyle="{ fontSize: '24rpx' }"
					@search="search"
					@change="change"
					@clear="clearSearch"
				/>
			</view>
			<view class="cancel" @click="clearSearch">取消</view>
		</view>
		<view class="history-wrap pt-40" v-if="!searchKey">
			<view class="history-title flex-a space-between plr-24">
				<view class="c-grey-4e fs-26">历史搜索</view>
				<image :src="imgBaseUrl + 'icon-delete.png'" class="icon-36" @click="clearHistory" />
			</view>
			<view class="history-list flex flex-wrap">
				<view
					class="history-item"
					v-for="(item, index) in historyList"
					:key="index"
					@click="searchHistory(item)"
				>
					{{ item }}
				</view>
			</view>
		</view>
		<scroll-view
			v-if="searchKey"
			:scroll-y="true"
			:refresher-enabled="true"
			class="plr-24 result-list"
			:style="{
				height: scrollViewHeight,
				paddingBottom: `${commonStore.safeAreaBottomHeight}px`,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<search-res :listData="listData" :searchKey="searchKey" />
			</template>
			<zjy-empty emptyText="暂无相关的产品哦~" v-else></zjy-empty>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app"
import useCommonStore from "@/store/common"
import useUserStore from "@/store/user"
import useSearchStore from "@/store/search"
import searchRes from "./components/search-res.vue"
import { pageBack } from "@/utils/page-redirect"
import { $getSearchList } from "@/api/home"
import { getLocation } from "@/utils/location"

const imgBaseUrl = inject("imgBaseUrl")
const userStore = useUserStore()
const commonStore = useCommonStore()
const searchStore = useSearchStore()
const searchKey = ref("")
const historyList = ref([])
const listData = ref([])
const searched = ref(false)
const userLongitude = ref("")
const userLatitude = ref("")
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + 44}px - 90rpx)`

const clearSearch = () => {
	searchKey.value = ""
	listData.value = []
}
const search = (saveHistoryVal = true) => {
	if (searchKey.value === "") {
		return
	}
	saveHistoryVal && saveHistory()
	$getSearchList({ search_key: searchKey.value, longitude: userLongitude.value, latitude: userLatitude.value }).then(
		(res) => {
			listData.value = res.list
		}
	)
}
const change = (e) => {
	searchKey.value = e
	search(false)
}

// #region 搜索历史
const clearHistory = () => {
	uni.showModal({
		title: "提示",
		content: "确认删除全部历史记录？",
		success: (res) => {
			if (res.confirm) {
				historyList.value = []
				searchStore.clearHistoryList()
				uni.showToast({
					title: "历史记录已清空",
					icon: "none",
				})
			}
		},
	})
}
const saveHistory = () => {
	if (historyList.value.includes(searchKey.value)) {
		historyList.value.splice(historyList.value.indexOf(searchKey.value), 1)
	}
	historyList.value.unshift(searchKey.value)
	searchStore.updateHistoryList(historyList.value)
}
const searchHistory = (item) => {
	searchKey.value = item
	search()
}
// #endregion

onLoad(() => {
	historyList.value = searchStore.historyList

	getLocation(false).then(
		({ longitude, latitude }) => {
			userStore.updateLocation({ longitude, latitude })
			// 页面逻辑处理
			userLongitude.value = longitude.toString()
			userLatitude.value = latitude.toString()
		},
		() => {}
	)
})
</script>
<style scoped lang="scss">
.page-search {
	position: fixed;
	width: 100vw;
	top: 0;
	bottom: 0;
	background: #fff;
	z-index: 9999;
	.search-wrap {
		padding: 12rpx 24rpx;
		display: flex;
		align-items: center;
		.search-input {
			flex: 1;
			display: flex;
			align-items: center;
			height: 64rpx;
			background: $grey;
			border-radius: 32rpx;
		}
	}
	.cancel {
		padding-left: 32rpx;
		color: $c-black-1d;
		font-size: 32rpx;
	}
}
.history-list {
	margin: 32rpx 8rpx 0 8rpx;
	.history-item {
		position: relative;
		font-size: 24rpx;
		background: #f8f9fc;
		border-radius: 16rpx;
		padding: 8rpx 12rpx;
		margin-bottom: 20rpx;
		margin-left: 16rpx;
	}
}
</style>
